<template>
  <fieldset>
    <legend>商品详情</legend>
    <div id="app">
      <div class="add">
        产品编号:<input type="text" v-model="code" /> 产品名称:<input
          type="text"
          v-model="productName"
        /><br />
        图片地址:<input type="text" v-model="imgSrc" /> 产品价格:<input
          type="text"
          v-model="price"
        />
        <input type="button" value="添加" @click="add" />
      </div>

      <div>
        <table class="tb">
          <tr>
            <th>
              <input
                type="checkbox"
                v-model="allCheck"
                @change="allCheckChange"
              />
              全选
            </th>
            <th>产品图片</th>
            <th>编号</th>
            <th>品牌名称</th>
            <th>价格</th>
            <th>数量</th>
            <th>操作</th>
          </tr>
          <!-- 动态生成内容tr -->
          <tr v-for="(item, index) of products" :key="item.id">
            <td>
              <input type="checkbox" v-model="checks" :value="item" />
            </td>
            <td>
              <img width="80" :src="item.imgSrc" alt="" />
            </td>
            <td>
              {{ item.code }}
            </td>
            <td>
              {{ item.productName }}
            </td>
            <td>
              {{ item.price }}
            </td>
            <td>
              <button @click="decrease(item)" :disabled="item.count === 1">
                -
              </button>
              &nbsp;
              {{ item.count }}
              &nbsp;
              <button @click="increase(item)">+</button>
            </td>
            <td>
              <button @click="del(index)">删除</button>
            </td>
          </tr>
        </table>

        <div class="add" style="text-align: center" v-show="!products.length">
          没有更多数据了
        </div>
        <h4 class="add">总价格:{{ total }}</h4>
      </div>
    </div>
  </fieldset>
</template>

<script>
export default {
  data() {
    return {
      code: "",
      productName: "",
      imgSrc: "",
      price: "",
      allCheck: false,
      checks: [],
      //对象中的字段，产品图片，编号，产品名称，数量，价格
      products: [
        {
          id: 1,
          imgSrc:
            "https://www.52doutuwang.com/wp-content/uploads/2021/07/20210722162327_24213.jpg",
          code: "1122",
          productName: "吴签的牙签",
          count: 1,
          price: 0.01,
        },
        {
          id: 2,
          imgSrc:
            "https://ts1.cn.mm.bing.net/th/id/R-C.edf7a1ef9fdacc6c071debc5b50dc833?rik=7rsLBtPC8o50SA&riu=http%3a%2f%2fn.sinaimg.cn%2fsinacn20118%2f542%2fw859h483%2f20190531%2ffdc8-hxvzhte7315115.jpg&ehk=YlmM7NGbAkW6H9blYsgEVa7CoicWQ99m%2bvYbp6fI25Q%3d&risl=&pid=ImgRaw&r=0",
          code: "1123",
          productName: "品如的衣柜",
          count: 10,
          price: 100,
        },
      ],
    };
  },
  //算法
  computed: {
    total() {
      //计算总价
      let res = this.checks.reduce((total, item) => {
        return (total += item.price * item.count);
      }, 0);
      return res.toFixed(2);
    },
  },
  watch: {
    checks(newChecks) {
      console.log(newChecks);
      if (newChecks.length === this.products.length) {
        this.allCheck = true;
      } else {
        this.allCheck = false;
      }
    },
  },
  methods: {
    increase(current) {
      current.count++;
    },
    decrease(current) {
      current.count--;
    },
    //全选
    allCheckChange() {
      console.log(this.allCheck);
      if (this.allCheck) {
        //勾选所有商品
        this.checks = this.products;
      } else {
        //取消勾选
        this.checks = [];
      }
    },
    del(index) {
      //删除
      let target = this.products.splice(index, 1);
      this.checks = this.checks.filter((item) => item.id !== target[0].id);
    },
    add() {
      //非空校验
      if (!this.code || !this.imgSrc || !this.price || !this.productName) {
        return;
      }
      let obj = {
        id: Math.random().toString(32).substring(2),
        imgSrc: this.imgSrc,
        code: this.code,
        productName: this.productName,
        count: 1,
        price: this.price,
      };
      //添加到数据数组中products
      this.products.push(obj);
    },
  },
};
</script>

<style scoped>
* {
  margin: 0;
}
#app {
  width: 600px;
}

.tb {
  border-collapse: collapse;
  width: 100%;
}

.tb th {
  background-color: #0094ff;
  color: white;
}

.tb td,
.tb th {
  padding: 5px;
  border: 1px solid black;
  text-align: center;
}

.add {
  padding: 5px;
  border: 1px solid black;
  margin: 5px 0;
}
</style>
